body{
    
    .main{
        
        overflow-y: auto;
        .swiper{
            height: 200px;
            .swiper-slide img{
                width: 100%;
            }
        }
        .content{
            width: 90%;
            height: 130px;
            justify-content: space-between;
            margin: 5%;
            img{
                left: -16px;
                top: 20px;
                width: 121px;
                height: 121px;
                opacity: 0.3;
            }
            .nowRank,.sum{
                left: 14px;
                top: 14px;
                height: 28px;
                color: rgba(0, 78, 115, 100);
                }
            
            .rank{
                border-radius: 15px 15px 15px 15px;
                flex: 2;
                background-color: rgba(21, 146, 204, 100);
                margin-right: 5%;
                overflow: hidden;

                .rankNum{
                    border-radius: 15px 15px 15px 15px;
                    flex: 2;
                    right: 14px;
                    top:30px;
                    font-weight: 500;
                    line-height: 112px;
                    color: rgba(255, 255, 255, 100);
                }

            }
            .punch{
                border-radius: 15px 15px 15px 15px;
                flex:3;
                background-color: rgba(123, 203, 245, 100);
                
                .nowPunch{
                    top: 80px;
                    right: 14px;
                    width: 100px;
                    height: 40px;
                    line-height: 34px;
                    border-radius: 20px;
                    color: rgba(0, 78, 115, 100);    
                    border: 3px solid rgba(0, 81, 119, 100);                
                    
                }
            }
            .sport{
                border-radius: 15px 15px 15px 15px;
                flex: 2;
                margin-right: 5%;
                background: url(../img/index-card-data.png);
                background-size: cover;
                .sportData{
                    margin: 14px 0 0 14px;

                }
            }
            .badge{
                border-radius: 15px 15px 15px 15px;
                flex: 2;
                background-color: rgba(21, 146, 204, 100);
                overflow: hidden;
                .sumbadge{
                    margin: 14px 0 0 14px;
                }
                .badgeNum{
                    right: 32px;
                    bottom: 14px;
                    width: 48px;
                    color: rgba(0, 78, 115, 100);
                    span{
                        bottom: 14px;
                    }
                }
            }
        }
        .coursebg,.joggingbg{
            width: 90%;
            height: 150px;
            background-size: cover;
            margin-left: 5%;
            border-radius: 15px 15px 15px 15px;
        }
        .coursebg{
            background-image: url(../img/index-swiper-bg2.jpg);
            .course-train{
                padding: 14px 0 0 14px;
            }
        }
        .joggingbg{
            background-image: url(../img/index-card-run.png);
            margin-top: 5%;
            .jogging{
                padding: 14px 0 0 14px;

            }

        }
    }
    
}

